
// @ts-ignore
import {Form, Input, Modal} from "antd";
import React from "react";

// @ts-ignore
export default function AddModal({open,onAddCancel,onAddOk}){
	const [form] = Form.useForm();
	return (
		<Modal title={"添加"} okText={"确定"} cancelText={"取消"} okButtonProps={{ autoFocus: true }} destroyOnClose={true}
					 open={open} onCancel={onAddCancel} onOk={async () => {
			const values = await form.validateFields();
			form.resetFields();
			onAddOk(values)
		}
		}>
			<Form layout={"horizontal"} form={form}
						labelCol={{ span: 4 }}
						wrapperCol={{ span: 12 }} size={"small"}>
				<Form.Item
					name="username"
					label="用户名"
					rules={[{ required: true, message: '用户名不能为空' }]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					name="nickname"
					label="昵称"
					rules={[{ required: true, message: '昵称不能为空' }]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					name="password"
					label="密码"
					rules={[{ required: true}]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					name="repeatPassword"
					label="重复密码"
					dependencies={["password"]}
					rules={[{ required: true},({ getFieldValue }) => ({
						validator(_, value) {
							if (!value || getFieldValue('password') === value) {
								return Promise.resolve();
							}
							return Promise.reject(new Error('新密码不匹配!'));
						},
					})]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					name="mobile"
					label="手机号"
					rules={[{ required: false}]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					name="email"
					label="邮箱"
					rules={[{ required: false}]}
				>
					<Input />
				</Form.Item>
			</Form>
		</Modal>
	);
}